<template>
  <view>
    <!-- 加载状态遮罩 -->
    <view v-if="isLoading" class="loading-mask">
      <view class="loading-container">
        <view class="loading-spinner">
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
        </view>
        <view class="loading-text">加载中...</view>
      </view>
    </view>
    
    <view class="actlist">
      <view class="list_itme fade-in" v-for="(item,index) in AcList" :key="index"  @click="viewDetail(item.id)">
        <image :src="'https:' + item.coverImage" mode="center" class="corve_img"></image>
        <view class="title">{{item.name}}</view>
        <view class="time">
            <image src="/static/add.png" mode="widthFix"></image>
			<view class="adds">{{item.address}}</view>
        </view>
		<view class="phone" @click="Makphone(item.phoneNumber)">
			<image src="/static/phone.png" mode="widthFix"></image>
		</view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoadingMore">
        <view class="loading-more-spinner">
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
        </view>
        <view class="loading-more-text">加载更多...</view>
      </view>
      
      <!-- 没有更多数据提示 -->
      <view class="no-more" v-if="!isLoadingMore && AcList.length > 0 && AcList.length >= total">
        <view class="no-more-text">没有更多数据了</view>
      </view>
    </view>
  </view>
</template>

<script>
import { venuepage } from '@/core/api/index.js'
export default{
  data(){
    return{
      total: 0,
      AcList: [],
      isLoading: false, // 初始加载状态
      isLoadingMore: false, // 加载更多状态
      currentPage: 1, // 当前页码
      pageSize: 20, // 每页数量
      isEnd: false // 是否加载完毕
    }
  },
  onLoad() {
    this.fetchActivityList()
  },
  onReachBottom() {
    // 页面触底时加载更多
    if (!this.isEnd && !this.isLoadingMore) {
      this.loadMore()
    }
  },
  methods:{
	  Makphone(nb){
		  uni.makePhoneCall({
		  	phoneNumber: nb //仅为示例
		  });
	  },
    // 初始加载活动列表
    async fetchActivityList() {
      this.isLoading = true
      this.currentPage = 1
      
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        const { data } = await venuepage(params)
        this.AcList = data.records || []
        this.total = data.total || 0
        this.isEnd = this.AcList.length >= this.total
        console.log('初始加载数据:', data)
      } catch (error) {
        console.error('获取活动列表失败:', error)
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    viewDetail(id){
		uni.navigateTo({
			url:'/pages/reservation/details?id=' + id
		})
	},
    // 加载更多
    async loadMore() {
      if (this.isEnd || this.isLoadingMore) return
      
      this.isLoadingMore = true
      this.currentPage++
      
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        const { data } = await activitypage(params)
        const newList = data.records || []
        
        // 合并新旧数据
        this.AcList = [...this.AcList, ...newList]
        this.total = data.total || 0
        this.isEnd = this.AcList.length >= this.total
        
        console.log('加载更多数据:', data)
      } catch (error) {
        console.error('加载更多失败:', error)
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        })
        // 加载失败时回退页码
        this.currentPage--
      } finally {
        this.isLoadingMore = false
      }
    }
  }
}
</script>

<style>
.fade-in {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<style lang="scss">
.actlist{
  padding: 20rpx 40rpx;
  .list_itme{
    background-color: #fff;
    margin-bottom: 35rpx;
    padding-bottom: 30rpx;
	border-radius: 0 0 20rpx 20rpx;
	position: relative;
	.adds{
		width: 450rpx;
		white-space: nowrap;        /* 禁止文本换行 */
		  overflow: hidden;           /* 溢出部分隐藏 */
		  text-overflow: ellipsis;    /* 溢出部分显示省略号 */
	}
	.phone{
		position: absolute;
		width: 56rpx;
		top: 80%;
		right: 8%;
		image{
			width: 100%;
		}
	}
    image{
      width: 100%;
      height: 360rpx;
	  border-radius: 20rpx 20rpx 0 0;
    }
    .title , .time{
      padding-left: 30rpx;
    }
    .title{
      font-size: 32rpx;
      margin: 10rpx 0 8rpx;
    }
    .time{
      color: #666666;
      font-size: 24rpx;
	  display: flex;
	  align-items: center;
	  image{
		  margin-right: 8rpx;
		  width: 26rpx;
	  }
    }
    .check{
      margin: 30rpx 30rpx;
      text-align: center;
      line-height: 80rpx;
      height: 80rpx;
      background-color: #FBE0CF;
    }
  }
  
  // 加载更多提示
  .loading-more {
    padding: 30rpx 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .loading-more-spinner {
      display: flex;
      margin-right: 20rpx;
      
      .spinner-dot {
        width: 20rpx;
        height: 20rpx;
        margin: 0 5rpx;
        border-radius: 50%;
        background-color: #F26B2E;
        animation: bounce 1.4s infinite ease-in-out both;
      }
      
      .spinner-dot:nth-child(1) {
        animation-delay: -0.32s;
      }
      
      .spinner-dot:nth-child(2) {
        animation-delay: -0.16s;
      }
    }
    
    .loading-more-text {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  // 没有更多数据提示
  .no-more {
    padding: 30rpx 0;
    text-align: center;
    
    .no-more-text {
      font-size: 26rpx;
      color: #999;
    }
  }
}

/* 加载动画样式 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-container {
  text-align: center;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.spinner-dot {
  width: 20rpx;
  height: 20rpx;
  margin: 0 10rpx;
  border-radius: 50%;
  background-color: #F26B2E;
  animation: bounce 1.4s infinite ease-in-out both;
}

.spinner-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.spinner-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  } 
  40% {
    transform: scale(1.0);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #333;
}
</style>
